<template>
    <div>
        <el-page-header title='订单详情' @back='$router.back()'></el-page-header>
        <template v-if="orderInfo">
            <h1>商品信息</h1>
            <el-table 
                :data='orderInfo.product_info' 
                border
                stripe
                :header-cell-style="TABLE_HEADER_CELL_STYLE">
                <el-table-column label="产品图片" prop='product_title'>
                    <template v-slot='scope'>
                        <el-image :src='scope.row.img_url' style="width : 50px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="产品名称" prop='product_title'></el-table-column>
                <el-table-column label="数量" prop='number'></el-table-column>
                <el-table-column label="规格" prop='product_specs'></el-table-column>
            </el-table>
            <!-- 用户信息 -->
            <el-descriptions title="用户信息" border>
                <el-descriptions-item label="用户编号">{{orderInfo.user_id}}</el-descriptions-item>
                <el-descriptions-item label="用户姓名">{{orderInfo.real_name}}</el-descriptions-item>
                <el-descriptions-item label="手机号码">{{orderInfo.telephone}}</el-descriptions-item>
                <el-descriptions-item label="备注" :span='2'>{{orderInfo.remark}}</el-descriptions-item>
                <el-descriptions-item label="收货地址">
                    {{orderInfo.address_json.province}}
                    {{orderInfo.address_json.city}}
                    {{orderInfo.address_json.district}}
                    {{orderInfo.address_json.address}}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="其他信息" border :column="3" >
                <el-descriptions-item label="订单编号">{{orderInfo.order_number}}</el-descriptions-item>
                
                <el-descriptions-item label="下单时间">{{orderInfo.created_at}}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{orderInfo.order_status_name}}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{orderInfo.product_money}}</el-descriptions-item>
                <el-descriptions-item label="支付方式">{{orderInfo.payment_type_name}}</el-descriptions-item>
                <el-descriptions-item label="配送方式">{{orderInfo.delivery_type_name}}</el-descriptions-item>
                <el-descriptions-item label="运费">{{orderInfo.shipping_money}}</el-descriptions-item>
                <el-descriptions-item label="快递信息">{{orderInfo.express_name}}/{{orderInfo.express_number}}</el-descriptions-item>
            </el-descriptions>
        </template>
        
    </div>
</template>

<script>
    export default {
        data () {
            return {
                orderInfo : null,
            }
        },
        created () {
            this.getOrderInfo();
        },
        methods : {
            getOrderInfo () {
                this.__api.orderApi.orderDetail({
                    id : this.$route.params.id
                }).then(res => {
                    this.orderInfo = res;
                })
            }
        }
    }
</script>

<style lang='less' scoped>
    h1 {
        font-size: 15px;
        margin-bottom: 10px;
        font-weight: bold;
    }
</style>